<template>
    <mian-layout style="background:#fff">
        <div class="ads-rl-dt-box">
            <div class="listwcwrap">
                <div class="dmdjdsl">
                    <ul class="listBox">
                        <li>
                            <label for="">广告位名称：</label>
                            <p>{{oDetail.adPlaceTitle}}</p>
                        </li>
                        <li>
                            <label for="">广告位持有人：</label>
                            <p>{{oDetail.adPlaceOwnerName}}</p>
                        </li>
                        <li>
                            <label for="">广告投放周期：</label>
                            <p>{{oDetail.adDays}}</p>
                        </li>
                        <li>
                            <label for="">投放结果：</label>
                            <p>
                                <el-tag type="danger" v-if="oDetail.status==1">投票中</el-tag>
                                <el-tag type="danger" v-else-if="oDetail.status==2">违规</el-tag>
                                <el-tag type="danger" v-else-if="oDetail.status==3">不违规</el-tag>
                            </p>
                        </li>
                    </ul>
                    <ul class="listBox">
                        <li>
                            <label for="">所属地标：</label>
                            <p>{{oDetail.arLandmarkName}}</p>
                        </li>
                        <li>
                            <label for="">广告商：</label>
                            <p>{{oDetail.adPlaceMerchantName}}</p>
                        </li>
                        <li>
                            <label for="">投诉用户：</label>
                            <p>{{oDetail.userName}}</p>
                        </li>
                        <li>
                            <label for="">投放时间：</label>
                            <p>{{oDetail.createTime}}</p>
                        </li>
                    </ul>
                </div>
                <div class="tsyy">
                    <label for="">投诉内容：</label>
                    <p>{{oDetail.content}}</p>
                </div>
            </div>
            <div class="vdimgbox" v-if="oDetail.adUrl">
                <div v-if="getFileType(oDetail.adUrl)=='img'" class="imgbox" :style="'background-image: url('+oDetail.adUrl+')'"></div>
                <video v-else-if="getFileType(oDetail.adUrl)=='video'" class="myvideo" ref="videoEle" controls>
                    <source :src="oDetail.adUrl" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
            </div>
        </div>


        <div style="padding:40px 0 50px 0">
            <div class="el-descriptions__title" style="margin-bottom:20px">广告投票记录</div>
            <my-table :loading="loading" :lists="tableData" @pageChange="handleChange" :sequence="true" :page='page'>
                <el-table-column property="awardUserName" label="账户名"></el-table-column>
                <el-table-column property="bidderName" label="投票结果">
                    <template slot-scope="scope">
                        <span v-if='scope.row.status==1'>投票中</span>
                        <span v-else-if='scope.row.status==2'>违规</span>
                        <span v-else-if='scope.row.status==3'>不违规</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="投票时间"></el-table-column>
            </my-table>
        </div>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import uploadFile from '@/components/public/uploadFile.vue'
import {
  get_complaint_detail,
  get_ads_award_record
} from '@/api/collext'
export default {
    components:{
      myTable,
      myBack,
      uploadFile
    },
    data(){
        return{
            id:'',
            oDetail:{},
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:false,
            tableData:[],
            multipleSelectionIds:[],
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.id = this.$route.params.id
        this.getData()
       // this.getList()
    },
    methods:{
        async getData(){ 
            const res = await get_complaint_detail(this.id)
            if(res.success){
                this.oDetail = res.data
            }
        },
        getList(){
            this.loading = true
            get_ads_award_record({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                adPlaceJobRecordId:this.id
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.total
            })
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        getFileType(fileUrl){
            const filename = fileUrl.toLowerCase()
            if((/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(filename))){
                return 'img'
            }else if((/\.(mp4|avi|wmv|mpeg)$/.test(filename))){
                return 'video'
            }else if((/\.(mp3|aac|wav|wma|cda|flac|m4a|mid|mka|mp2|mpa|mpc|ape|ofr|ogg|ra|wv|tta|ac3|dts)$/.test(filename))){
                return 'audio'
            }else{
                return ''
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .ads-rl-dt-box{
        display: flex;
        width: 100%;
        .listwcwrap{
            flex: 1;
            .dmdjdsl{
                display: flex;
                flex: 1;
            }
        }
        .listBox{
            flex: 1;
            list-style: none;
            font-size: 12px;
            flex-shrink: 0;
            li{
                display: flex;
                height: 34px;
                align-items: center;
                label{
                    width: 110px;
                    text-align: right;
                    flex-shrink: 0;
                }
                p{
                    flex: 1;
                    flex-shrink: 0;
                    padding: 0;
                    margin: 0;
                }
            }
        }
        .tsyy{
            display: flex;
            line-height: 30px;
            label{
                width: 110px;
                text-align: right;
                flex-shrink: 0;
            }
            p{
                flex: 1;
                flex-shrink: 0;
                padding: 0;
                margin: 0;
            }
        }
        .vdimgbox{
            width: 300px;
            height: 170px;
            max-height: 170px;
            background: #aaa7a7;
            .myvideo{
                width: 100%;
                height: 100%;
            }
            .imgbox{
                display: block;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }
    .jljeyl{
        display: flex;
        height: 100px;
        margin: 30px 0 0 0;
        .item{
            display: flex;
            width: 300px;
            background: #f0eeee;
            font-size: 14px;
            line-height: normal;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            &.item2{
                display: flex;
                flex-flow:row;
                flex: 1;
                .tjItem{
                    flex: 1;
                    text-align: center;
                    p{
                        font-size: 12px;
                    }
                    h5{
                        font-size: 16px;
                        color: #1baf54;
                    }
                }
            }
            p{
                padding: 0 0 10px 0;
                margin: 0;
            }
            h5{
                font-size: 20px;
                color: #f84040;
                font-weight: 600px;
            }
            &+.item{
                margin-left: 30px;
            }
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>